<template>
  <div class="navBar" @click="show = true">
    <van-nav-bar
      :title="props.title"
      :left-text="props.leftText"
      :right-text="props.rightText"
      :left-arrow="props.leftArrow"
      :border="props.border"
    />
    <drawer :show="show" @close="show = false"/>
  </div>
</template>

<script>
import drawer from "../drawer"
import changeAttr from '@/utils/changeAttr.js'

export default {
  components:{
    drawer
  },
  name:"navBar",
  data() {
    return {
      show:false,
      props:{},
      attr:[
        {type:"input",title:"标题",name:"title",value:"标题"},
        {type:"input",title:"左侧标题",name:"leftText",value:"返回"},
        {type:"input",title:"右侧标题",name:"rightText",value:""},
        {type:"switch",title:"展示左侧栏目",name:"leftArrow",value:true},
        {type:"switch",title:"展示下边框",name:"border",value:false},
      ]
    }
  },
  created() {
    this.props = changeAttr(this.attr)
  },
  methods: {
    
  },
}
</script>

<style scoped>
  .navBar{
    cursor: pointer;
    box-sizing: border-box;
    border: 1px dashed transparent;
  }
  .navBar:hover{
    border: 1px dashed #1989fa;
  }
</style>